<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-button @click="exportData">数据导出</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="uploadDialogVisible=true">数据导入</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="加载中"
      row-key="id"
      border
      lazy
      :load="load"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="name" label="省" width="180"/>
      <el-table-column prop="dictCode" label="编码"/>
      <el-table-column prop="value" label="值"/>
      <el-table-column prop="createTime" label="创建时间"/>
    </el-table>

    <el-dialog title="收货地址" :visible.sync="uploadDialogVisible" width="400px">
      <el-upload
        class="upload-dict"
        accept=".xls, .xlsx"
        :file-list="uploadFileList"
        drag
        :action="baseURL+'/admin/cmn/dict/importData'"
        :multiple="false"
        :on-success="onUploadSuccess">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传Excel文件</div>
      </el-upload>
    </el-dialog>

  </div>
</template>

<script>
import {findChildData} from '@/api/dict'

export default {
  data() {
    return {
      baseURL: process.env.VUE_APP_BASE_API,
      uploadDialogVisible: false,
      uploadFileList:[],
      list: [],
      listLoading: true
    }
  },
  created() {
    this.findChildData(1)
  },
  methods: {
    exportData() {
      window.open(this.baseURL + '/admin/cmn/dict/exportData');
    },
    onUploadSuccess() {
      this.uploadFileList=[]
      this.uploadDialogVisible = false
      this.findChildData(1)
    },
    findChildData(id) {
      this.listLoading = true
      findChildData(id).then(response => {
        this.list = response.data
        this.listLoading = false
      })
    }
    ,
    load(tree, treeNode, resolve) {
      findChildData(tree.id).then(res => {
        resolve(res.data)
      })
    }

  }
}
</script>
